<template>
  <view>
    <view v-if="flag">
      <view class="top">
        <image src="../../static/back.png" mode="" class="img"></image>
        <view class="center">
          <view class="proportion">
            <view class="valuation">评估额度</view>
            <view class="quota">{{info.credit_money}}元</view>
          </view>
          <view class="multiple">
            <view class="proportion">
              <view class="cost">综合费用</view>
              <view class="repayment">{{info.expenses}}元</view>
            </view>
            <view class="proportion date">
              <view class="cost">还款日期</view>
              <view class="repayment">{{info.repay_date}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="launch">
        <view class="message">
          <image src="../../static/money.png" alt="" class="moneyIcon" />
          <view class="m_l_4">寄语</view>
        </view>
        <view class="quotaMessage"
          >{{info.remarks}}</view
        >
      </view>

      <view class="button_error" @click="applyNow"> 立即下款 </view>
    </view>
    <view v-else>
      <view class="step">
        <view v-for="(item, index) in arr" :key="index" class="d-f">
          <view class="stepinfo" >
            <view
              class="outside"
              :class="pitchIndex == index ? 'pitchSide' : ''"
            >
              <view
                class="inside"
                :class="pitchIndex == index ? 'point' : ''"
                >{{ item.num }}</view
              >
            </view>

            <view
              class="name"
              :class="pitchIndex == index ? 'pitchNmae' : ''"
              >{{ item.name }}</view
            >
          </view>
          <image
            src="../../static/select.png"
            alt=""
            class="select"
            v-if="index < 2 && pitchIndex == index"
          />
          <image
            src="../../static/noSelect.png"
            alt=""
            class="noSelect"
            v-if="index < 2 && pitchIndex != index"
          />
        </view>
      </view>
      <view class="describe">
        <view class="fill">
          <image src="../../static/tips.png" alt="" class="tipsIcon" />
          <view class="fill_size"
            >填写完信息我们会评估您的额度，不会跳转到其他app，请花3分钟耐心填写完！资料越齐全、真实，额度越高。</view
          >
        </view>
      </view>
	  <firstStep class="bottom" v-if="pitchIndex==0" @addPitchIndex="addPitchIndex"></firstStep>
	  <twoStep class="bottom" v-else-if="pitchIndex==1" @nextStep="nextStep" @Previous="Previous"></twoStep>
	 <StepThree class="bottom"  v-else-if="pitchIndex==2" @threePrevious="threePrevious" @complete="complete"></StepThree>
	  
    </view>
  </view>
</template>

<script>
import { mapState, mapActions,mapMutations } from "vuex";
import firstStep from '../../components/firstStep'
import twoStep from '../../components/twoStep'
import StepThree from '../../components/StepThree'
export default {
  data() {
    return {
      flag: false,
      arr: [
        {
          num: "1",
          name: "基本信息",
        },
        {
          num: "2",
          name: "信用情况",
        },
        {
          num: "3",
          name: "上传图片",
        },
      ],
    };
  },
  components: {
    firstStep,twoStep,StepThree
  },
  methods: {
	  ...mapMutations({
         changepitch:'MANAGEMENT/CHANGE_PITCH'
	  }),
    ...mapActions({
      getData: "MANAGEMENT/GET_DATA", //获取用户信息
	  getList:"MANAGEMENT/GET_LIST", //获取周转用途下拉项
	  submitData:"MANAGEMENT/SUBMIT_DATA", //提交用户数据
	  getApply:"MANAGEMENT/GET_APPLY", //提交用户数据
    }),
	
	addPitchIndex(){
	this.changepitch(1)
		uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
});
	},
	nextStep(){
    this.changepitch(2)
	uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
});
	},
	Previous(){
		 this.changepitch(0)
	uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
});	
	},
	threePrevious(){
		 this.changepitch(1)
		uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
});
	},
	complete(){
		 this.changepitch(0)
		this.submitData()
	},
	applyNow(){
		
	  this.getApply(this.info.id)
	}
  },
  mounted() {},
  onShow() {
    this.getData();
	this.getList()
    this.flag = uni.getStorageSync("flag");
  },
  watch: {},
  computed: {
    ...mapState({
      values: (state) => state.MANAGEMENT.values,
	  info: (state) => state.MANAGEMENT.info,
	  pitchIndex:(state) => state.MANAGEMENT.pitchIndex,
    }),
  },
};
</script>

<style scoped lang='scss'>
.top {
  width: 100%;
  height: 530rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img {
  width: 100%;
  height: 100%;
}
.center {
  width: 600rpx;
  position: absolute;

  height: 340rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.valuation {
  font-size: 40rpx;
  color: #ffffff;
}
.cost {
  font-size: 36rpx;
  color: #ffffff;
}
.proportion {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 24rpx;
}
.quota {
  padding: 10rpx 20rpx;
  font-size: 50rpx;
  font-weight: 800;
  color: rgb(244,174,83);
  margin-top: 12rpx;
}
.repayment {
  padding: 10rpx 20rpx;
  font-size: 36rpx;
  font-weight: 800;
  color: rgb(244,174,83);
  margin-top: 12rpx;
}
.multiple {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.button_error {
  width: 686rpx;
  height: 100rpx;
  background: #e24d49;
  border-radius: 10rpx;
  font-size: 32rpx;
  color: #fff;
  margin-top: 94rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 32rpx;
  bottom: 80rpx;
  position: absolute;
}
.launch {
  width: 686rpx;
  height: 210rpx;
  border-radius: 10rpx;
  margin-left: 32rpx;
  font-weight: 400;
  position: absolute;
  top: 466rpx;
  background: linear-gradient(
    to bottom,
    #fed4c9,
    #fefefe
  ); /*设置按钮为渐变颜色*/
}
.message {
  display: flex;
  padding-top: 24rpx;
  padding-left: 32rpx;
}
.moneyIcon {
  width: 46rpx;
  height: 46rpx;
}
.quotaMessage {
  padding: 20rpx 32rpx 32rpx 32rpx;
  font-size: 32rpx;
  color: #262727;
  max-height: 60px;
  overflow-y: auto;
}
.step {
  width: 100%;
  height: 300rpx;
  background: #e24d49;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inside {
  width: 52rpx;
  height: 52rpx;
  background: #f0a4a2;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e24d49;
  font-size: 30rpx;
}
.point {
  background: #f8d6d5;
  width: 50rpx;
  height: 50rpx;
}
.pitchNmae {
  color: #ffffff !important;
  font-size: 32rpx !important;
}
.outside {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pitchSide {
  background: #f0a4a2;
}
.name {
  margin-top: 28rpx;
  font-size: 28rpx;
  color: #f8d6d5;
}
.stepinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.select {
  width: 69rpx;
  height: 20rpx;
  margin-top: 20rpx;
}
.noSelect {
  width: 69rpx;
  height: 6rpx;
  margin-top: 32rpx;
}
.describe {
  width: 686rpx;
  height: 184rpx;
  background: #ffffff;
  border-radius: 10rpx;
  position: absolute;
  top: 244rpx;
  margin-left: 32rpx;
}
.fill {
  padding: 32rpx;
  display: flex;
}
.tipsIcon {
  width: 24rpx;
  height: 24rpx;
}
.fill_size {
  font-size: 28rpx;
  margin-left: 14rpx;
  color: #0a0b16;
  width: 600rpx;
}


.bottom{
	padding-bottom: 80rpx;
}
</style>
<style>
page {
  background: #fafafa;
}
</style>
